<template>
    <a-row>
        <a-col :span="12">

            <a-card hoverable style="width: 630px; height: 500px; margin-left:100px;margin-top:50px">
                <template #cover>
                    <img alt="example" src="https://img1.baidu.com/it/u=2065342635,3713815846&fm=26&fmt=auto" />
                </template>
                <a-card-meta style="font-size: 30px" title="NET交易平台">
                    <template #description>www.instagram.com</template>
                </a-card-meta>
            </a-card>

        </a-col>
        <a-col :span="12">
            <!-- <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
                :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                @change="handleChange">
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                    <loading-outlined v-if="loading"></loading-outlined>
                    <plus-outlined v-else></plus-outlined>
                    <div class="ant-upload-text">Upload</div>
                </div>
            </a-upload> -->
            <a-descriptions :model="project" align="center" class="newproject" bordered>
                <a-descriptions-item label="项目名称" :span="1">
                    <a-input v-model:value="project.p_title" />
                </a-descriptions-item>
                <a-descriptions-item label="类型">
                    <a-select   :size="large" v-model:value="project.p_class">
                        <a-select-option value="大数据">大数据</a-select-option>
                        <a-select-option value="机器人">机器人</a-select-option>
                        <a-select-option value="人工智能">人工智能</a-select-option>
                        <a-select-option value="医疗">医疗</a-select-option>
                    </a-select>
                </a-descriptions-item>
                <a-descriptions-item label="信誉成度">
                    <a-input v-model:value="project.p_reputation" />
                </a-descriptions-item>
                <a-descriptions-item label="项目时间">
                    <a-space>
                        <a-date-picker v-model:value="project.p_start_time" />

                        至
                        <a-date-picker v-model:value="project.p_end_time" />
                    </a-space>


                </a-descriptions-item>
                <a-descriptions-item label="报名截至时间">
                    <a-date-picker v-model:value="project.p_join_time" />
                </a-descriptions-item>
                <a-descriptions-item label="预期收益">$
                    <a-input v-model:value="project.p_expect_money" />
                </a-descriptions-item>
                <a-descriptions-item label="获得融资">$
                    <a-input v-model:value="project.p_curr_money" />
                </a-descriptions-item>
                <a-descriptions-item label="信誉要求">
                    <a-input v-model:value="project.p_demanmd" />
                </a-descriptions-item>
                <a-descriptions-item label="组队状态">

                    <a-input v-model:value="project.p_people_num" />
                </a-descriptions-item>
                <a-descriptions-item label="项目简介">
                    <a-input v-model:value="project.p_info" />
                </a-descriptions-item>
            </a-descriptions>
            <a-button type="dashed" @click="createproject">提交</a-button>
            <a-button type="primary">上链</a-button>


        </a-col>
    </a-row>
</template>
<script setup>
    import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
    import { message } from 'ant-design-vue';
    import { get, post, tip } from "@/common"; //基础
    import { defineComponent, ref, reactive, toRaw } from 'vue';

    function getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    const project = reactive({
        p_id: "",
        p_url: "",
        p_title: "",
        p_maeket_info: "",
        p_technical_info: "",
        p_img_info: "",
        p_start_time: "",
        p_end_time: "",
        p_people_num: "",
        p_join_time: "",
        p_info: "",
        p_curr_money: "",
        p_expect_money: "",
        p_current_num: "",
        p_demanmd: "",
        p_class: "",
      
    })







    const onSubmit = () => {
        console.log('submit!', toRaw(formState));
    };
    const formState = reactive({
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
    });
    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref('');

    const pidnum=()=>{
        post("/project/count").then((res) =>{
            console.log(res);
            project.p_id=res.data+100;

        });
    };
    const a=Math.random()*5;
    const projectimg=()=>{
        project.p_url="qwdoihqwdqwadhqawhdoadqa"
        if(a<1){project.p_url="https://img1.baidu.com/it/u=2854907226,3904678591&fm=15&fmt=auto";}
        else if(a<2){project.p_url="https://img1.baidu.com/it/u=3587430061,948834493&fm=26&fmt=auto";}
        else if(a<3){project.p_url="https://img1.baidu.com/it/u=294745611,477608618&fm=15&fmt=auto";}
        else if(a<4){project.p_url="https://img1.baidu.com/it/u=2425142165,922136146&fm=26&fmt=auto";}
        else if(a<5){project.p_url="https://img0.baidu.com/it/u=2567830720,752688359&fm=15&fmt=auto";}
        else {project.p_url="https://img0.baidu.com/it/u=2567830720,752688359&fm=15&fmt=auto";}
    }
    projectimg();
    pidnum();
    const createproject = () => {
 
            
            post("/project/create", project).then((res) => {
                console.log(res);
                tip.success("创建成功！");
                router.push({ path: "/home" });
            });
      
    };


    const handleChange = info => {
        if (info.file.status === 'uploading') {
            loading.value = true;
            return;
        }

        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, base64Url => {
                imageUrl.value = base64Url;
                loading.value = false;
            });
        }

        if (info.file.status === 'error') {
            loading.value = false;
            message.error('upload error');
        }
    };

    const beforeUpload = file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

        if (!isJpgOrPng) {
            message.error('You can only upload JPG file!');
        }

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }

        return isJpgOrPng && isLt2M;
    };



</script>
<style>
    .avatar-uploader>.ant-upload {
        width: 128px;
        height: 128px;
        margin-left: 350px;
        margin-top: 40px;
        align-self: auto;
    }

    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .newproject {
        margin-top: 80px;
        margin-right: 30px;
    }
    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    position: relative;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100px;
    height: 32px;
    padding: 0 11px;
}
</style>